<template>
  <div class="newspaper">
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <div v-html="mynewsConten.body"></div>
        </div>
        <div class="addmypictrue">
          <img :src="mynewsConten.image" />
        </div>
      </div>
    </div>
    <div class="newspaper_footerbox">
      <div class="newspaper_footerbox_imgbox" @click="gotoHomeFn">
        <img src="../assets/left.png" />
      </div>
      <!-- 评论 -->
      <div class="newspaper_footerbox_imgbox">
        <img src="../assets/comment.png" />
      </div>
      <div class="newspaper_footerbox_imgbox">
        <img src="../assets/thumbs-up.png" />
      </div>
      <!-- 收藏 -->
      <div class="newspaper_footerbox_imgbox" @click="clickCollectFn">
        <img src="../assets/star.png" v-if="isHideCollect" />
        <img src="../assets/starfillred.png" v-if="isShowCollect" />
      </div>
      <div class="newspaper_footerbox_imgbox">
        <img src="../assets/share-two.png" />
      </div>
    </div>
  </div>
</template>
  
  <script>
import Swiper from "swiper";
import "../../node_modules/swiper/swiper-bundle.mjs";
import { storiespages } from "@/api/index";

export default {
  name: "NewspaperView",
  data() {
    return {
      mynewsConten: [],
      isHideCollect: true,
      isShowCollect: false,
      mydom: "",
    };
  },
  mounted() {
    // 初始化 Swiper 实例(实现轮播图效果)
    new Swiper(".swiper-container", {
      // 配置选项
      pagination: {
        el: ".swiper-pagination",
      },
    });
    this.addStylesheet(this.mycssUrl);
  },
  created() {
    this.getRouterIdFn();
    this.storiespagesFn(this.mynewid);
  },
  updated() {},
  methods: {
    // 获取路由上传递过来的id
    getRouterIdFn() {
      this.mynewid = this.$route.query.id;
    },
    gotoHomeFn() {
      this.$router.push({ path: "/" }).catch(() => {});
    },
    // 处理接口数据
    async storiespagesFn(mydate) {
      try {
        const content = await storiespages({}, mydate);
        this.mynewsConten = content.story;
        // console.log("历史新闻内容:", this.mynewsConten);
      } catch (error) {
        console.error("获取历史新闻失败mmm:", error);
      }
    },
    // 创建一个引入css的link标签
    addStylesheet(url) {
      // 创建一个 link 元素
      const link = document.createElement("link");
      link.rel = "stylesheet";
      link.type = "text/css";
      link.href = url;
      // 添加到文档头部
      document.head.appendChild(link);
    },
    // 收藏
    clickCollectFn() {
      let localuserid = localStorage.getItem("USERID");
      let localstoryid = this.$route.query.id;
      let getloginuser = {};
      getloginuser.userid = localuserid;
      getloginuser.storyid = localstoryid;
      getloginuser.id = Math.random().toString().slice(2);
      let arr = [getloginuser];
      let arrStr = JSON.stringify(arr);
      this.isHideCollect = !this.isHideCollect;
      this.isShowCollect = !this.isShowCollect;
      if (this.isShowCollect) {
        localStorage.setItem("LOGINID", arrStr);
      }

      if (this.isHideCollect) {
        localStorage.removeItem("LOGINID");
      }
      // console.log("1111");
    },
  },
};
</script>

<style lang="less" scoped>
@import "~swiper/swiper-bundle.css";
@import "../css/newspaper.css";

.addmypictrue {
  img {
    z-index: 10000;
    position: absolute;
    top: 0;
    left: 0;
    width: 340px;
    height: 200px;
    padding: 10px 20px;
  }
}

.newspaper {
  width: 100vw;
  height: 100vh;

  .newspaper_footerbox {
    width: 100%;
    height: 60px;
    background: white;
    position: fixed;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    border-top: 1px solid gray;
    z-index: 100000;

    .newspaper_footerbox_imgbox {
      width: 45px;
      height: 30px;

      &:nth-child(1) {
        border-right: 1px solid gray;
      }

      img {
        width: 30px;
      }
    }
  }
}
</style>
